<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" color="#fff" :border="false"
      :statusBar="true" @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">{{ getBaseTypeName(baseType!) }}顺序练习</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">顺序练习</view>
      </view>
    </view>
    <!-- #endif -->
    <scroll-view class="scroll-view" enable-back-to-top scroll-y>
      <!-- 封面 -->
      <view class="header-cover">
        <view class="header-tips">
          <image class='header-tips-img' src="https://media.jiabl.net.cn/miniapp/images/notice.png"
            mode="scaleToFill" />
          不知道怎么练吗？试试我为你推荐的高效学习方法吧
          <uni-icons type="right" color="#525252" size="12" />
        </view>
      </view>
      <!-- 用户信息 -->
      <view class="profile">
        <view class="profile-header">
          <view class="profile-header-user">
            <image class="avatar"
              src="https://p3.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-i-0813_ow7ZnnhOIAG2ofABLBzDALeAZEB7AAedMCEywb.jpeg?from=3782654143"
              mode="heightFix"></image>
            <view class="nick-name">回眸一笑</view>
          </view>
          <view class="profile-header-rate">
            <view class="rate">30<text class="txt">%</text><text class="txt icon-xiang-you"></text></view>
            <view class="tip">预测考试通过率</view>
          </view>
        </view>
        <view class="exam-plan-date">已过预约考试<text class="exam-plan-date-num">67</text>天</view>

        <!-- 预测考试通过率 -->
        <view class="forecast-exam-pass-rate">
          <view class="exam-pass-rate-tips">
            <text class="tips-label">预测考试通过率<text class="tips-label-keyword">很低</text></text>
            <text class="tips-desc">定制课程高效学</text>
          </view>
          <view class="exam-pass-rate-button">去提升</view>
        </view>

      </view>
      <view class="main-panel">
        <!-- 做题记录 -->
        <view class="exercise-exercise-records">
          <view class="exercise-record" @tap="toExerciseNoAnswerQuestions">
            <view class="num">{{ useAnswerNoCount(baseType!) }}<text class="num-icon icon-right"></text></view>
            <view class="text">未做题</view>
          </view>
          <view class="exercise-record">
            <view class="num">{{ useAnswerErrorCount(baseType!) }} <text class="num-icon icon-right"></text>
            </view>
            <view class="text">做错题</view>
          </view>
          <view class="exercise-record">
            <view class="num">{{ useAnswerCollectCount(baseType!) }}<text class="num-icon icon-right"></text>
            </view>
            <view class="text">收藏题</view>
          </view>
          <view class="exercise-record ">
            <view class="num correct-rate">{{ useAnswerCorrectRate(baseType!) }}<text class="rate">%</text></view>
            <view class="text">正确率</view>
          </view>
        </view>
        <!-- 导航按钮 -->
        <view class="nav-btn-panel">
          <view class="nav-btn continue" @tap="toExercise">开始练习</view>
          <navigator hover-class="none" :url="`/pagesExercise/selectBase/selectBase?baseType=${baseType}`">
            <view class="nav-btn choice">
              <text class="txt">精选{{ useLearnBaseQbCount(baseType!).selectQbCount }}题</text>
              <text class="hot">推荐</text>
            </view>
          </navigator>
        </view>

        <!-- 同步做题记录 -->
        <view class="sync-answer-record icon-shuaxin">
          同步做题记录
        </view>
      </view>

    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import { useLearnBaseQbCount } from '@/composables/LearnBase'
  import { useAnswerErrorCount, useAnswerNoCount, useAnswerCollectCount, useAnswerCorrectRate } from '@/composables/Exercise'
  import { ExerciseTypeEnum } from '@/api/constants'
  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif
  const baseType = ref<string>()


  onLoad((options: any) => {
    baseType.value = options.baseType
  })

  // 根据题库类型获取题库名称
  const getBaseTypeName = (baseType: string) => {
    if (baseType === 'km1') {
      return '科目一'
    }
    else if (baseType === 'km4') {
      return '科目四'
    }
  }

  // 去练习
  const toExercise = () => {
    uni.navigateTo({
      url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.SequenceExercise}&baseType=${baseType.value}`
    })
  }

  // 去练习未做题
  const toExerciseNoAnswerQuestions = () => {
    uni.navigateTo({
      url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.SequenceExerciseNoAnswerQuestions}&baseType=${baseType.value}`
    })
  }

  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    background-repeat: no-repeat;
    background-image: url("https://media.jiabl.net.cn/miniapp/images/sequence_exercise_bg.png");
    background-size: 100% auto;
    background-color: #e7f0f9;
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-size: 16px;
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: v-bind(titleHeight);

      .title {
        // margin-left: 40rpx;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
      }
    }


  }

  /* #endif */

  .scroll-view {
    display: flex;
    flex-direction: column;
    padding: 0 20rpx;


  }

  .header-cover {
    position: relative;
    margin-top: 2rpx;
    height: 280rpx;
    background: url("https://media.jiabl.net.cn/miniapp/images/mock_exam_cover.png") no-repeat;
    background-size: 100%;

    .header-tips {
      position: absolute;
      left: 0;
      bottom: 20rpx;
      height: 60rpx;
      width: 100%;
      color: #525252;
      font-size: 23rpx;
      line-height: 60rpx;
      background-color: #bde4ff;
      border-radius: 27rpx;
      border: solid 2rpx #ffffff;
      opacity: 0.8;

      .header-tips-img {
        margin-top: -24rpx;
        margin-left: 10rpx;
        width: 41rpx;
        height: 46rpx;
      }
    }
  }

  // 用户信息
  .profile {
    display: flex;
    flex-direction: column;
    padding: 20rpx 40rpx;
    background-image: linear-gradient(180deg,
        #ecfffb 0%,
        #f7fdfd 51%,
        #ffffff 100%),
      linear-gradient(#ffffff,
        #ffffff);
    border-radius: 20rpx;

    .profile-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .profile-header-user {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 85rpx;

        .avatar {
          width: 85rpx;
          height: 85rpx;
          border-radius: 50%;
        }

        .nick-name {
          font-size: 26rpx;
          color: #141818;
          margin-left: 13rpx;
        }
      }

      .profile-header-rate {

        .rate {
          font-size: 76rpx;
          color: #fa5c5a;
          font-weight: bold;

          .txt {
            margin-left: 4rpx;
            font-size: 24rpx;
          }
        }

        .tip {
          font-size: 22rpx;
          color: #929a99;
        }
      }
    }

    .exam-plan-date {
      font-size: 24rpx;
      color: #141818;

      .exam-plan-date-num {
        color: #2eccad;
      }
    }

    // 预测考试通过率
    .forecast-exam-pass-rate {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 32rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      font-size: 26rpx;
      background-color: #fff9ee;
      border-radius: 20rpx;
      border: solid 2rpx #ffe0ad;
      font-size: 26rpx;
      color: #141818;

      .exam-pass-rate-tips {
        display: flex;
        flex-direction: column;

        .tips-label {
          .tips-label-keyword {
            padding-left: 10rpx;
            font-size: 27rpx;
            color: #fa6062;
          }
        }

        .tips-desc {
          margin-top: 10rpx;
          font-size: 22rpx;
        }
      }

      .exam-pass-rate-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 140rpx;
        height: 50rpx;
        font-size: 24rpx;
        color: #441d00;
        background-image: linear-gradient(-90deg,
            #fac15e 0%,
            #fac96f 26%,
            #fad07f 51%,
            #fcde95 100%),
          linear-gradient(#58beff,
            #58beff);
        border-radius: 25rpx;
      }

    }
  }

  .main-panel {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    padding: 20rpx 40rpx;
    width: 710rpx;
    background-color: #ffffff;
    box-shadow: 8rpx 8rpx 38rpx 0rpx rgba(93, 93, 93, 0.07);
    border-radius: 20rpx;


    // 做题记录
    .exercise-exercise-records {
      display: flex;
      justify-content: space-between;
      margin: 40rpx 0 40rpx;

      .exercise-record {
        display: flex;
        flex-direction: column;
        align-items: center;

        .num {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 46rpx;
          font-weight: bold;
          color: #333333;

          &.correct-rate {
            color: #ff595b;
            align-items: flex-end;

            .rate {
              margin-bottom: 4rpx;
              font-size: 30rpx;
              font-weight: normal;
            }
          }
        }

        .num-icon {
          margin-left: 5rpx;
          font-size: 20rpx;
        }

        .text {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          color: #898989;
        }


      }
    }

    // 导航按钮
    .nav-btn-panel {
      display: flex;
      flex-direction: column;

      .nav-btn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;
        width: 645rpx;
        font-size: 32rpx;
        color: #fff;
        border-radius: 47rpx;

      }

      .continue {

        background-image: linear-gradient(90deg,
            #6cc6fa 0%,
            #56b0fc 100%)
      }

      .choice {
        margin-top: 34rpx;
        color: #0f0f0f;
        border: solid 1rpx #2e2e2e;


        .hot {
          margin-left: 12rpx;
          width: 62rpx;
          height: 32rpx;
          font-size: 18rpx;
          color: #fff;
          text-align: center;
          line-height: 32rpx;
          background-color: #f16a66;
          border-radius: 12rpx 0rpx 12rpx 0rpx;
        }
      }
    }

    // 同步做题记录
    .sync-answer-record {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 40rpx;
      font-size: 28rpx;
      color: #56b0fc;
    }
  }

</style>
